<template>
	<view class="area-picker">
		<!-- 显示选中的地区 -->
		<!-- <u-cell class="selected-area" @click="showPicker = true">
			<text class="placeholder" v-if="!selectedProvince.name">请选择省市区</text>
			<text class="selected-text" v-else>
				{{ selectedProvince.name }} {{ selectedCity.name }} {{ selectedDistrict.name }}
			</text>
			<text class="arrow">▼</text>
		</u-cell> -->
		<u-cell size="large" title="省/市/区" :value="city" isLink @click="showPicker = true"></u-cell>
		<!-- 省市区选择弹窗 -->
		<view class="picker-modal" v-if="showPicker">
			<view class="picker-mask" @click="showPicker = false"></view>
			<view class="picker-content">
				<view class="picker-header">
					<text class="picker-title">选择地区</text>
					<text class="picker-close" @click="showPicker = false">×</text>
				</view>

				<view class="picker-columns">
					<!-- 省份列 -->
					<view class="picker-column">
						<view class="column-title">省份</view>
						<scroll-view class="column-list" scroll-y>
							<view v-for="(province, index) in provinces" :key="province.code" class="column-item"
								:class="{active: provinceIndex === index}" @click="selectProvince(index)">
								{{ province.name }}
							</view>
						</scroll-view>
					</view>

					<!-- 城市列 -->
					<view class="picker-column">
						<view class="column-title">城市</view>
						<scroll-view class="column-list" scroll-y>
							<view v-for="(city, index) in currentCities" :key="city.code" class="column-item"
								:class="{active: cityIndex === index}" @click="selectCity(index)">
								{{ city.name }}
							</view>
						</scroll-view>
					</view>

					<!-- 区县列 -->
					<view class="picker-column">
						<view class="column-title">区县</view>
						<scroll-view class="column-list" scroll-y>
							<view v-for="(district, index) in currentDistricts" :key="district.code" class="column-item"
								:class="{active: districtIndex === index}" @click="selectDistrict(index)">
								{{ district.name }}
							</view>
						</scroll-view>
					</view>
				</view>

				<view class="picker-footer">
					<!-- <button class="btn-cancel" @click="showPicker = false">取消</button> -->
					<u-button type="primary" :plain="true" @click="showPicker = false" text="取消"></u-button>
					<u-button type="primary" text="确定" @click="confirmSelection"></u-button>

					<!-- <button class="btn-confirm" @click="confirmSelection">确定</button> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import cityCode from "../cityCode.json";
	export default {
		name: 'AreaPicker',
		props: {
			// 初始值，格式：{ province: '110000', city: '110100', district: '110101' }
			value: {
				type: Object,
				default: () => ({})
			},
			city: {
				type: String,
				default: "请选择地区"
			}
		},
		data() {
			return {
				showPicker: false,
				provinceIndex: 0,
				cityIndex: 0,
				districtIndex: 0,
				selectedProvince: {},
				selectedCity: {},
				selectedDistrict: {},
				// 省市区数据（实际项目中可以从接口获取）
				// provinces: [{
				// 		code: '110000',
				// 		name: '北京市',
				// 		children: [{
				// 			code: '110100',
				// 			name: '北京市',
				// 			children: [{
				// 					code: '110101',
				// 					name: '东城区'
				// 				},
				// 				{
				// 					code: '110102',
				// 					name: '西城区'
				// 				},
				// 				{
				// 					code: '110105',
				// 					name: '朝阳区'
				// 				},
				// 				{
				// 					code: '110106',
				// 					name: '丰台区'
				// 				},
				// 				{
				// 					code: '110107',
				// 					name: '石景山区'
				// 				},
				// 				{
				// 					code: '110108',
				// 					name: '海淀区'
				// 				}
				// 			]
				// 		}]
				// 	},
				// 	{
				// 		code: '310000',
				// 		name: '上海市',
				// 		children: [{
				// 			code: '310100',
				// 			name: '上海市',
				// 			children: [{
				// 					code: '310101',
				// 					name: '黄浦区'
				// 				},
				// 				{
				// 					code: '310104',
				// 					name: '徐汇区'
				// 				},
				// 				{
				// 					code: '310105',
				// 					name: '长宁区'
				// 				},
				// 				{
				// 					code: '310106',
				// 					name: '静安区'
				// 				},
				// 				{
				// 					code: '310107',
				// 					name: '普陀区'
				// 				},
				// 				{
				// 					code: '310109',
				// 					name: '虹口区'
				// 				}
				// 			]
				// 		}]
				// 	},
				// 	{
				// 		code: '440000',
				// 		name: '广东省',
				// 		children: [{
				// 				code: '440100',
				// 				name: '广州市',
				// 				children: [{
				// 						code: '440103',
				// 						name: '荔湾区'
				// 					},
				// 					{
				// 						code: '440104',
				// 						name: '越秀区'
				// 					},
				// 					{
				// 						code: '440105',
				// 						name: '海珠区'
				// 					},
				// 					{
				// 						code: '440106',
				// 						name: '天河区'
				// 					},
				// 					{
				// 						code: '440111',
				// 						name: '白云区'
				// 					},
				// 					{
				// 						code: '440112',
				// 						name: '黄埔区'
				// 					}
				// 				]
				// 			},
				// 			{
				// 				code: '440300',
				// 				name: '深圳市',
				// 				children: [{
				// 						code: '440303',
				// 						name: '罗湖区'
				// 					},
				// 					{
				// 						code: '440304',
				// 						name: '福田区'
				// 					},
				// 					{
				// 						code: '440305',
				// 						name: '南山区'
				// 					},
				// 					{
				// 						code: '440306',
				// 						name: '宝安区'
				// 					},
				// 					{
				// 						code: '440307',
				// 						name: '龙岗区'
				// 					},
				// 					{
				// 						code: '440308',
				// 						name: '盐田区'
				// 					}
				// 				]
				// 			}
				// 		]
				// 	},
				// 	{
				// 		code: '330000',
				// 		name: '浙江省',
				// 		children: [{
				// 				code: '330100',
				// 				name: '杭州市',
				// 				children: [{
				// 						code: '330102',
				// 						name: '上城区'
				// 					},
				// 					{
				// 						code: '330103',
				// 						name: '下城区'
				// 					},
				// 					{
				// 						code: '330104',
				// 						name: '江干区'
				// 					},
				// 					{
				// 						code: '330105',
				// 						name: '拱墅区'
				// 					},
				// 					{
				// 						code: '330106',
				// 						name: '西湖区'
				// 					},
				// 					{
				// 						code: '330108',
				// 						name: '滨江区'
				// 					}
				// 				]
				// 			},
				// 			{
				// 				code: '330200',
				// 				name: '宁波市',
				// 				children: [{
				// 						code: '330203',
				// 						name: '海曙区'
				// 					},
				// 					{
				// 						code: '330204',
				// 						name: '江东区'
				// 					},
				// 					{
				// 						code: '330205',
				// 						name: '江北区'
				// 					},
				// 					{
				// 						code: '330206',
				// 						name: '北仑区'
				// 					},
				// 					{
				// 						code: '330211',
				// 						name: '镇海区'
				// 					},
				// 					{
				// 						code: '330212',
				// 						name: '鄞州区'
				// 					}
				// 				]
				// 			}
				// 		]
				// 	}
				// ],
				provinces: cityCode,
			}
		},
		computed: {
			currentCities() {
				if (this.provinces.length > 0 && this.provinces[this.provinceIndex]) {
					return this.provinces[this.provinceIndex].children || []
				}
				return []
			},
			currentDistricts() {
				if (this.currentCities.length > 0 && this.currentCities[this.cityIndex]) {
					return this.currentCities[this.cityIndex].children || []
				}
				return []
			}
		},
		watch: {
			value: {
				immediate: true,
				handler(newVal) {
					this.setInitialValue(newVal)
				}
			}
		},
		methods: {
			// 设置初始值
			setInitialValue(value) {
				if (value.province && value.city && value.district) {
					const provinceIndex = this.provinces.findIndex(p => p.code === value.province)
					if (provinceIndex !== -1) {
						this.provinceIndex = provinceIndex
						const cityIndex = this.provinces[provinceIndex].children.findIndex(c => c.code === value.city)
						if (cityIndex !== -1) {
							this.cityIndex = cityIndex
							const districtIndex = this.provinces[provinceIndex].children[cityIndex].children.findIndex(d =>
								d.code === value.district)
							if (districtIndex !== -1) {
								this.districtIndex = districtIndex
								this.selectedProvince = this.provinces[provinceIndex]
								this.selectedCity = this.provinces[provinceIndex].children[cityIndex]
								this.selectedDistrict = this.provinces[provinceIndex].children[cityIndex].children[
									districtIndex]
							}
						}
					}
				}
			},

			// 选择省份
			selectProvince(index) {
				this.provinceIndex = index
				this.cityIndex = 0
				this.districtIndex = 0
			},

			// 选择城市
			selectCity(index) {
				this.cityIndex = index
				this.districtIndex = 0
			},

			// 选择区县
			selectDistrict(index) {
				this.districtIndex = index
			},

			// 确认选择
			confirmSelection() {
				this.selectedProvince = this.provinces[this.provinceIndex]
				this.selectedCity = this.currentCities[this.cityIndex] || {}
				this.selectedDistrict = this.currentDistricts[this.districtIndex] || {}

				const result = {
					province: this.selectedProvince.code,
					city: this.selectedCity.code,
					district: this.selectedDistrict.code,
					provinceName: this.selectedProvince.name,
					cityName: this.selectedCity.name,
					districtName: this.selectedDistrict.name,
					fullAddress: `${this.selectedProvince.name} ${this.selectedCity.name} ${this.selectedDistrict.name}`
				}

				this.$emit('input', {
					province: this.selectedProvince.code,
					city: this.selectedCity.code,
					district: this.selectedDistrict.code
				})
				this.$emit('change', result)

				this.showPicker = false
			}
		}
	}
</script>

<style scoped>
	.area-picker {
		width: 100%;
	}

	.selected-area {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 24rpx;
		border: 2rpx solid #e0e0e0;
		border-radius: 12rpx;
		background-color: #fafafa;
		font-size: 28rpx;
		color: #333;
	}

	.selected-area:active {
		background-color: #f0f0f0;
	}

	.placeholder {
		color: #999;
	}

	.selected-text {
		flex: 1;
	}

	.arrow {
		color: #666;
		font-size: 24rpx;
		margin-left: 16rpx;
	}

	.picker-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 9999;
	}

	.picker-mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.picker-content {
		position: absolute;
		bottom: 100rpx;
		left: 0;
		width: 100%;
		background-color: #fff;
		border-radius: 24rpx 24rpx 0 0;
		max-height: 70vh;
		display: flex;
		flex-direction: column;
	}

	.picker-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 5rpx 30rpx;
		border-bottom: 2rpx solid #f0f0f0;
	}

	.picker-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	.picker-close {
		font-size: 40rpx;
		color: #999;
		padding: 16rpx;
	}

	.picker-columns {
		display: flex;
		flex: 1;
		height: 400rpx;

	}

	.picker-column {
		flex: 1;
		display: flex;
		flex-direction: column;
		border-right: 2rpx solid #f0f0f0;
	}

	.picker-column:last-child {
		border-right: none;
	}

	.column-title {
		padding: 24rpx;
		text-align: center;
		font-size: 28rpx;
		color: #666;
		background-color: #f8f8f8;
		border-bottom: 2rpx solid #f0f0f0;
	}

	.column-list {
		flex: 1;
		overflow-y: scroll;
	}

	.column-item {
		padding: 24rpx;
		text-align: center;
		font-size: 28rpx;
		color: #333;
		border-bottom: 2rpx solid #f8f8f8;
	}

	.column-item.active {
		background-color: #007AFF;
		color: #fff;
	}

	.column-item:active {
		background-color: #f0f0f0;
	}

	.column-item.active:active {
		background-color: #0056CC;
	}

	.picker-footer {
		display: flex;
		padding: 24rpx;
		border-top: 2rpx solid #f0f0f0;
		gap: 24rpx;
	}

	.btn-cancel,
	.btn-confirm {
		flex: 1;
		padding: 24rpx;
		border: none;
		border-radius: 12rpx;
		font-size: 28rpx;
		font-weight: 500;
	}

	.btn-cancel {
		background-color: #f0f0f0;
		color: #666;
	}

	.btn-confirm {
		background-color: #007AFF;
		color: #fff;
	}

	.btn-cancel:active {
		background-color: #e0e0e0;
	}

	.btn-confirm:active {
		background-color: #0056CC;
	}
</style>